/******************************************
/* LAYOUT
/*******************************************/


body *{
    font-family: sans-serif;
    text-align: center;
  }
 /*******************************************  */
header{
    color: white;
    background-color:black;
    height:auto;
}
/* ************edited******************** */

.header1{
  margin-right: 5%;
}

.broccolito{
  font-family: fantasy;
  color: green;
  /* font-size: xx-large; */
}

.mail{
    filter: sepia(100%);
  }
  img:hover,
  img:focus {
    filter: none;
  }
        
.strong{
  color: red;
  background: white;
}
/* 
main > .bodyimg{
    background-image:
    url("img/pexels-kalistro-1327867553-25785792.jpg");
    width: 100%;
    background-position: center;
    background-size: cover;
    min-height: 50vh;
    color: white;
     
}

@media(max-with: 768px){
  .bodyimg{
    min-height: 50vh;
  }
  .bodyimg{
    font-size: calc(1.525rem + 3.3vw);
  }
}  */

a{
text-decoration: none;
color: white;

}

h2{
    padding-top: 5%;
}

/* *********edit************ */
.p0,.p1, .p2{ 
/* width: 30%;
padding-left: 35%; */
color: rgba(241, 207, 207, 0.885);
} 
/* ********************* */


ul{
 list-style: none;
}

 .countries{
    display: flex;
    flex-direction: column;
}

      .boxes{
        margin-top:2px;
        /* margin-right: 20%; */
        /* width: 15em;
        height: 4ex; */
        background-color: rgb(11, 102, 28);
        border: 2px solid firebrick;
        border-radius: 10px;
        font-weight: bold;
        color: black;
        cursor: pointer;
        /* padding-top: 5px; */
         
      }

      .countries{
        display: flex;
        align-items: center;
      }
      
      @media (any-hover: hover) {
        .boxes:hover {
          background: rgb(19, 52, 1);
        }
      }

      .p2{
        color: rgba(241, 207, 207, 0.885);;
      }

      .order{
        background-color: rgb(183, 244, 194);
        border: 2px solid rgb(232, 174, 15);
        border-radius: 5px;
        color: black;
        cursor: pointer;
        margin-left: 2%;
      }
      
      @media (any-hover: hover) {
        .order:hover {
          background: rgb(19, 52, 1);
        }
      }
      
      @media(min-width:180px){
        h1,h2,h3{
          font-size: 10px;
          width: 100%;
        }
        .broccolito{
          font-size: large;
        }

        .p0,.p1, .p2{
          font-size: 8px;
          width: 70%;
          padding-left: 15%;
        }

        .boxes{
           margin-right: 30%;
           width: 9em;
           height: 3ex;
           
        }
      }

      @media(min-width:330px){
        h1,h2,h3{
          font-size: 12px;
          width: 100%;
        }
        .broccolito{
          font-size:x-large;
        }

        .p0,.p1, .p2{
          font-size: 10px;
          width: 70%;
          padding-left: 15%;
        }

        .boxes{
           margin-right: 10%;
           width: 15em;
           height: 4ex;
           padding-top: 10px;
      }
    }

    @media(min-width:436px){
      .boxes{
           margin-right: 5%;
           width: 15em;
           height: 4ex;
           padding-top: 10px;
      }
    }